<template>
	<xn-form-container
		width="100%"
		:closable="false"
		:get-container="false"
		:style="{ position: 'absolute' }"
		:body-style="{ background: '#f0f2f5' }"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<template #title>
			<span>采购订单详情</span>
			<a-button style="float: right" @click="onClose">返回</a-button>
		</template>

		<a-tabs>
			<a-tab-pane>
				<a-card :bordered="false">
					<a-row :gutter="24" style="margin-bottom: 12px">
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>采购方式:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.orderMethod }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>供应商:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.supplierName }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>采购员:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.orderPerson }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>项目编号:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.proCode }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
					<a-row :gutter="24" style="margin-bottom: 12px">
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>项目名称:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.proName }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="9">
									<span>预计到货日期:</span>
								</a-col>
								<a-col :span="15">
									<span>{{ dayjs(formData.expectDate).format('YYYY-MM-DD HH:mm') }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>合同:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.contractId }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>采购订单号:</span>
								</a-col>
								<a-col :span="17">
									<span style="color: var(--primary-color)">{{ formData.code }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>

					<a-row :gutter="24" style="margin-bottom: 12px">
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>仓库:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.warehouseName }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>操作人:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainCreateUser(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>

						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>操作时间:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainCreateTime(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
					<a-row :gutter="24" style="margin-bottom: 12px">
						<a-col :span="6">
							<a-row style="color: red">
								<a-col :span="7">
									<span>审核状态:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.stateText }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6" v-if="formData.approveUserName">
							<a-row>
								<a-col :span="7">
									<span>审核人:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainApprover(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6" v-if="formData.approveTime">
							<a-row>
								<a-col :span="7">
									<span>审核时间:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainApproverTime(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>

						<a-col :span="6" v-if="formData.refuseReason">
							<a-row>
								<a-col :span="7">
									<span>拒绝理由:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.refuseReason }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
					<a-row :gutter="24">
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>备注:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.remark }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
				</a-card>

				<a-row>
					<a-col :span="24">
						<a-row>
							<a-button class="childAddButton"> 商品明细 </a-button>
						</a-row>
						<a-table
							:pagination="false"
							:columns="goodsColumns"
							:data-source="formData.purchaseOrderDetailList"
							:scroll="{ x: 1000 }"
						>
							<template #bodyCell="{ index, record, column }">
								<template v-if="column.dataIndex === 'index'">
									<span>{{ index + 1 }}</span>
								</template>

								<template v-if="column.dataIndex === 'price'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.price" />
								</template>

								<template v-if="column.dataIndex === 'orderNum'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.orderNum" />
								</template>
								<template v-if="column.dataIndex === 'taxRate'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.taxRate" />
								</template>

								<template v-if="column.dataIndex === 'taxPrice'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.taxPrice" />
								</template>

								<template v-if="column.dataIndex === 'noTaxPrice'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.noTaxPrice" />
								</template>

								<template v-if="column.dataIndex === 'deliveryDate'">
									<a-date-picker
										disabled
										format="YYYY-MM-DD"
										style="width: 120px"
										v-model:value="record.deliveryDate"
									/>
								</template>

								<template v-if="column.dataIndex === 'remark'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.remark" />
								</template>
							</template>
						</a-table>
					</a-col>
				</a-row>

				<div style="margin-top: 15px">
					<span style="color: #333; font-size: 16px; font-weight: 600">合计</span>
				</div>
				<a-row :gutter="24" style="margin-bottom: 50px; margin-top: 15px; margin-left: 20px">
					<a-col :span="6">
						<div style="margin-right: 12px; display: inline-block">
							<span>采购数量:</span>
						</div>
						<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="waresNum" />
					</a-col>
					<!-- <a-col :span="6">
						<div style="margin-right: 12px; display: inline-block">
							<span>含税总金额</span>
						</div>
						<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="taxAmount" />
					</a-col>
					<a-col :span="6">
						<div style="margin-right: 12px; display: inline-block">
							<span>不含税总金额</span>
						</div>
						<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="noTaxAmount" />
					</a-col> -->
				</a-row>
			</a-tab-pane>
			<a-tab-pane key="2" tab="审核流程">
				<a-card :bordered="false">
					<taskInfo :id="formData.processId"> </taskInfo>
				</a-card>
			</a-tab-pane>
		</a-tabs>

		<a-row style="margin-top: 50px" justify="center">
			<a-space size="middle">
				<a-button v-if="hasPerm('PURCHASE_ORDER_PRINT')" type="primary" ghost style="width: 100px; border-radius: 5px"
					>打印</a-button
				>
				<a-button style="width: 100px; border-radius: 5px" @click="onClose">关闭</a-button>
			</a-space>
		</a-row>
	</xn-form-container>
</template>

<script setup name="dbsForm">
	import dayjs from 'dayjs'
	import bizTool from '@/utils/bizTool'
	import purchasingOrderApi from '@/api/purchasing/order/purchasingOrderApi'
	import taskInfo from '@/components/Task/info.vue'
	// 定义emit事件
	//PROCUREMENT_PARTNERS
	const emit = defineEmits({ successful: null })
	// 默认是关闭状态
	const visible = ref(false)
	const contractList = ref([])
	// 表单数据，也就是默认给一些数据
	const formData = ref({})
	const waresNum = ref(0)
	const taxAmount = ref(0)
	const noTaxAmount = ref(0)

	// 打开抽屉
	const onOpen = (record) => {
		formData.value = {}
		visible.value = true

		let params = { ...record }
		waresNum.value = params.waresNum
		noTaxAmount.value = params.noTaxAmount
		taxAmount.value = params.taxAmount
		params.expectDate = ref(dayjs(params.expectDate))
		params.settingTime = ref(dayjs(params.settingTime))
		formData.value = params
		loadDetail(record)
	}

	const loadDetail = (record) => {
		purchasingOrderApi
			.detail({
				id: record.id
			})
			.then((res) => {
				let detailList = res.purchaseOrderDetailList.map((it) => {
					it['deliveryDate'] = dayjs(it['deliveryDate'])
					it['name'] = it['proMaterial']['name']
					it['brand'] = it['proMaterial']['brand']
					it['spec'] = it['proMaterial']['spec']
					it['code'] = it['proMaterial']['code']
					it['unit'] = it['proMaterial']['unit']
					return it
				})
				formData.value.purchaseOrderDetailList = detailList
			})
			.catch(() => {})
	}

	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})

	const goodsColumns = [
		{
			title: '序号',
			width: 80,
			dataIndex: 'index',
			align: 'center'
		},
		{
			title: '商品编号',
			width: 120,
			dataIndex: 'code',
			align: 'center',
			ellipsis: true
		},
		{
			title: '商品名称',
			dataIndex: 'name',
			width: 180,
			align: 'center',
			ellipsis: true
		},
		{
			title: '单位',
			dataIndex: 'unit',
			width: 100,
			align: 'center'
		},
		{
			title: '规格型号',
			dataIndex: 'spec',
			width: 120,
			align: 'center'
		},
		{
			title: '采购价格',
			dataIndex: 'price',
			width: 120,
			align: 'center'
		},
		// {
		// 	title: '税率',
		// 	dataIndex: 'taxRate',
		// 	width: 120,
		// 	align: 'center'
		// },

		{
			title: '采购数量',
			dataIndex: 'orderNum',
			width: 120,
			align: 'center'
		},
		// {
		// 	title: '含税金额',
		// 	dataIndex: 'taxPrice',
		// 	width: 120,
		// 	align: 'center'
		// },
		// {
		// 	title: '不含税金额',
		// 	dataIndex: 'noTaxPrice',
		// 	width: 140,
		// 	align: 'center'
		// },
		{
			title: '交货日期',
			dataIndex: 'deliveryDate',
			width: 140,
			align: 'center'
		},
		{
			title: '备注',
			dataIndex: 'remark',
			width: 200,
			align: 'center'
		}
	]
</script>

<style scoped :type="less">
	.childAddButton {
		margin-bottom: 12px;
		margin-top: 12px;
	}
</style>
